<template>
  <div class="md-button-base" :style="{padding: `0px ${plr}`}" :class="{'md-button-medium-base':size==='medium','md-button-small-base':size==='small','md-button-mini-base':size==='mini','md-button-plain-base':plain}">
    <i :class="icon"></i>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MdButtonBaseComponent',
  props: {
    size: {
      type: String,
      default: 'default',
    },
    icon: {
      type: String,
      default: null,
    },
    plain: {
      type: Boolean,
      default: false,
    },
    /**
     * 左右内边距
     */
    plr: {
      type: String,
      default: '10px',
    },
  },
};
</script>

<style lang="less" scoped>
.md-button-base {
  display: inline-block;
  border: 0;
  background-image: linear-gradient(90deg, #fc4c40, #fe7b4e, #fc4c40, #fe7b4e);
  background-size: 300% 100%;
  transition: all 0.4s ease-in-out;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
  box-shadow: 0 5px 10px 0 rgb(252 76 64 / 20%);
  &.md-button-plain-base {
    border: 1px solid #fc4c40;
    background-image: none;
    background-color: transparent;
    color: #fc4c40;
    &:hover {
      background-color: rgba(#fc4c40, 0.05);
      box-shadow: none;
    }
  }
  &.md-button-medium-base {
    height: 36px;
    line-height: 36px;
    font-size: 14px !important;
  }
  &.md-button-small-base {
    height: 32px;
    line-height: 32px;
    font-size: 13px !important;
  }
  &.md-button-mini-base {
    height: 28px;
    line-height: 28px;
    font-size: 12px !important;
  }
  &:last-child {
    margin-right: 0px;
  }
  &:hover {
    background-position: 50% 0;
    box-shadow: 0 5px 10px 0 rgb(252 76 64 / 20%);
  }
  i {
    margin-right: 3px;
    font-size: 12px;
  }
}
</style>
